<template>
	<div class="root">
        <el-form label-width="80px" label-position="top">
            <el-form-item label="单图：">
                <div @click="selectImg('img1')" class="c8">
                    <el-image  style="width: 100%; height: 100%" :src="pickImg.serverImg + pData.imgUrl" fit="contain"></el-image>
                </div>
            </el-form-item>
            <el-form-item label="多图：">
                <div>
                  <p class="c4">
                    第一张为产品主图,可拖动排序,建议使用尺寸800x800像素以上、大小不超过1M的正方形图片最多上传5张（至少1张）
                  </p>
                  <div class="c7 flex">
                    <draggable class="list-group flex" tag="transition-group" :component-data="{
                        tag: 'div',
                        type: 'transition-group',
                        name: !drag ? 'flip-list' : null,
                      }" v-model="pData.imgUrlArr" v-bind="dragOptions" @start="drag = true" @end="drag = false"
                      item-key="v">
                      <template #item="{ element, index }">
                        <div class="c8 flex list-group-item">
                          <el-image style="width: 100%; height: 100%" :src="pickImg.serverImg + element" fit="contain"></el-image>
                          <div class="c10" @click="pData.imgUrlArr.splice(index, 1)">
                            删除
                          </div>
                        </div>
                      </template>
                    </draggable>
                    <div class="c8 flex" @click="selectImg('img2')" v-if="pData.imgUrlArr.length < 5">
                      <div class="iconfont">&#xed21;</div>
                    </div>
                  </div>
                </div>
            </el-form-item>
			<el-form-item label="详情：">
				<div style="width:100%">
					<editor ref="editorRef" @selectImg="selectImg"></editor>
				</div>	
			</el-form-item>
        </el-form>
	</div>
	
	<aImgQn
	    :spaceValue="pickImg.spaceValue"
	    v-model:show="pickImg.showQn"
	    :name="pickImg.name" 
	    @img="imgSuccess">
	</aImgQn>
	
    <aImgLocal
        :spaceValue="pickImg.spaceValue"
        v-model:show="pickImg.showLocal"
        :name="pickImg.name" 
        @img="imgSuccess">
    </aImgLocal>
</template>

<script setup>
	import editor from "@/components/editor/index.vue";
	const editorRef = ref(null);

	const pData = reactive({
		imgUrlArr:[],
		imgUrl:[],
	})
	
	//图片选择组件
	import useSelectImg from "@/hook/useSelectImg.js";
	const {aImgLocal,aImgQn,pickImg,selectImg,imgSuccess} = useSelectImg('local',res=>{
		if(res.name == 'img1'){
			pData.imgUrl = res.value
		}
		if(res.name == 'img2'){
			pData.imgUrlArr.push(res.value);
		}
		if(res.name == 'editor'){
			editorRef.value.editorObj.execCommand(
				'inserthtml', 
				`<p><img style='max-width:100%' src='${pickImg.serverImg}${res.value}'/></p>`
			);
		}
	});

    //拖拽组件配置信息
	import draggable from "vuedraggable";
	const drag = false;
	const dragOptions = {
	  animation: 200,
	  group: "description",
	  disabled: false,
	  ghostClass: "ghost",
	};

</script>

<style scoped lang="scss">
	.root{
        padding:20px;

        .c8 {
    margin-right: 10px;
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed #d9d9d9;
  }
  
  .c8:hover {
    border-color: var(--el-color-primary);
    cursor: pointer;
  }
  
  .c8:hover .c10 {
    opacity: 1;
  }
  
  .c8 img {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  .c9 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .c10 {
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
    width: 100%;
    background: var(--el-color-primary);
    opacity: 0;
    transition: 0.3s;
    text-align: center;
    color: #fff;
    line-height: 30px;
  }
	}
	
	html.dark {
		.root{
			
		}
	}
	
	@media screen and (max-width:960px) {
		.root{
			
		}
	}
</style>